<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:12:31
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="orderDetailsPage">
    <el-page-header @back="goBack()" content="订单详情页面"> </el-page-header>
    <!-- {{ $route.query.orderId }}
    <button @click="getQuery">getQuery</button> -->
    <div class="orderdetailContent">
      <el-card
        :body-style="{ padding: '0px' }"
        style="background-color: #e5e9f2"
      >
        <div>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            订单状态：<span style="color: ">{{
              findByIdOrderMsg.status
            }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            下单时间：<span>{{ findByIdOrderMsg.orderTime }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            订单编号：<span>{{ findByIdOrderMsg.id }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            订单总额：￥<span style="color: red; font-size: 18px">{{
              findByIdOrderMsg.total
            }}</span
            >&nbsp;/元
          </p>
        </div>
      </el-card>
      <el-row :gutter="30">
        <el-col :span="12" style="">
          <!-- 顾客信息 -->
          <el-card :body-style="{ padding: '10px' }">
            <!-- {{ findByIdOrderMsg.customer }} -->
            <div>
              <h4>会员信息</h4>
            </div>
            <div style="">
              <div style="float: left">
                <img
                  :src="findByIdOrderMsg.customer.userFace"
                  style="width: 100px; height: 100px"
                />
              </div>
              <div style="float: left; margin-left: 20px">
                <h5>会员名称：{{ findByIdOrderMsg.customer.realname }}</h5>
                <h5>联系方式：{{ findByIdOrderMsg.customer.telephone }}</h5>
                <br>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- 送餐地址 -->
          <el-card :body-style="{ padding: '10px' }">
            <!-- {{ findByIdOrderMsg.address }} -->
            <div>
              <h4>派送信息</h4>
            </div>
            <div style="margin-left: 20px">
              <h5>派送人姓名：{{ findByIdOrderMsg.address.realname }}</h5>
              <h5>派送人联系方式：{{ findByIdOrderMsg.address.telephone }}</h5>
              <h5>
                派送地址：{{
                  findByIdOrderMsg.address.city +
                  findByIdOrderMsg.address.area +
                  findByIdOrderMsg.address.address
                }}
              </h5>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 订单详情里的菜品信息 -->
      <el-table
        :data="findByIdOrderMsg.orderLines"
        style="width: 100%;"
        :show-header="false"
      >
        <el-table-column prop="" label="" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.product.photo"
              :preview-src-list="[scope.row.product.photo]"
              @load="imgFinish"
            >
              <!-- 图片未加载时的占位图 -->
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" width="">
          <template slot-scope="scope">
            <p>
              商品名称：<span>{{ scope.row.name }}</span>
            </p>
            <p>商品描述：{{ scope.row.product.description }}</p>
            <p>顾客备注：</p>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" width="180">
          <template slot-scope="scope">
            <p>
              商品金额：￥<span style="color: red; font-size: 18px">{{
                scope.row.price
              }}</span>
              / 份
            </p>
            <p>商品数量：{{ scope.row.num }}</p>
            <p>
              总金额：￥<span style="color: red; font-size: 18px">{{
                scope.row.num * scope.row.price
              }}</span>
              元
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      curRowId: "",
      loading: false,
    };
  },
  // 计算属性
  computed: {
    ...mapState("order", ["orders", "findByIdOrderMsg"]),
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getQuery() {
      console.log(this.$route.query.orderId);
    },
    ...mapActions("order", ["getOrders", "getFindByIdOrderMsg", "getProducts"]),
    getFindByIdOrderData() {
      const params = {
        id: this.$route.query.orderId,
      };
      this.getFindByIdOrderMsg(params);
    },
    imgFinish() {
      this.loading = false;
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getFindByIdOrderData();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.orderDetailsPage{
  max-height: calc(100hv - 100px);
}
.orderDetailsContent{
  max-height: calc(100hv - 180px);
  margin-top: 10px;
  overflow: auto;
}
</style>
